<template>
    <!-- 这个组件存放的是首页右侧的饼图 -->
    <div ref="rightPieRef" class="right-pie"></div>
</template>

<script setup>
import { onMounted, ref, defineProps, watch } from 'vue';
import * as echarts from 'echarts';

// 定义 右侧饼图的dom元素
const rightPieRef = ref(null);

// 接收父组件的数据
const props = defineProps({
    dataPie: { // 修改为与父组件传递的属性名一致
        type: Object,
        required: true,
    }
});
// console.log(props, '子组件获取饼图数据'); // 正确访问传递的数据
// console.log(props.dataPie);

// 初始化饼图
let myChartPie = null;

const initChart = (data) => {
    const PieDom = rightPieRef.value; // 饼图的dom元素
    // 初始化饼图
    if (PieDom) {
        try {
            myChartPie = echarts.init(PieDom);
            const option = {
                color: ['#70A2FC', '#68BBC4'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示
                },
                series: [
                    {
                        name: '男女比例',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: data.man, name: '男' },
                            { value: data.woman, name: '女' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            position: 'outside', // 标签位置设置为外部
                            formatter: '{b}:{c}', // 标签内容格式
                        },
                        labelLine: {
                            show: true, // 显示连接线
                            length: 10, // 连接线长度
                        }
                    }
                ]
            };
            option && myChartPie.setOption(option);
        } catch (error) {
            console.error('初始化饼图时出错:', error);
        }
    } else {
        console.error('饼图 DOM 元素未找到');
    }
};

// 在组件挂载时初始化饼图
onMounted(() => {
    if (props.dataPie.man !== undefined && props.dataPie.woman !== undefined) {
        initChart(props.dataPie);
    }
});

// 监听 dataPie 的变化
watch(() => props.dataPie, (newData) => {
    if (newData.man !== undefined && newData.woman !== undefined) {
        initChart(newData); // 更新饼图数据
    } else {
        console.warn('dataPie 数据不完整，等待数据更新');
    }
});
</script>

<style scoped>
.right-pie {
    width: 100%;
    height: 360px;
}
</style>
